<template>
  <el-dialog title="分配线索" :visible.sync="open">
    <el-tag>
        你选择了{{ids.length}}个线索
    </el-tag>

    <el-form :model="form" ref="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptId">
            <treeselect v-model="form.deptId"
                        :options="deptOptions"
                        :show-count="true"
                        :disable-branch-nodes="true"
                        placeholder="请选择部门"
                        @input="changeDept"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户" prop="userId">
            <el-select v-model="form.userId" placeholder="请选用户">
              <el-option v-for="item in deptUserOptions" :label="item.nickName" :value="item.userId" :key="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

import Treeselect from "@riophae/vue-treeselect";
import {deptTreeSelect,listUser} from "@/api/system/user";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import{addRecord} from "@/api/crm/record"
export default {
    name: "assign",
    components:{ Treeselect },
       data(){
          return{
            ids:[],
            open:false,
            form:{
              userId: null,
              deptId: null,
            },
            deptOptions:[],
            deptUserOptions:[],
            rules:{
              userId:[{required:true,message:'用户不能为空',trigger:'blue'}],
              deptId:[{required:true,message:'部门不能为空',trigger:'blue'}],
            }
          }
      },
    created() {
      this.getDeptTree();
    },
  methods:{
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    changeDept(val){
      if (val){
        listUser({deptId:val}).then(resp=>{
          this.deptUserOptions=resp.rows;
          // this.form.userId= null;
        })
      }else {
        this.deptUserOptions=[]
        // this.form.userId= null;
      }
    },
    submitForm(){
      this.$refs.form.validate(valid=>{
        if (valid) {
          this.open=false;
          // this.form.id=this.ids;
          addRecord(this.idsTbList()).then(resp=>{
              if (resp.code==200){
                this.$modal.msgSuccess('分配成功')
                this.open=false;
                this.$emit('ok')
              }
          })
        }
      })
    },
    resetForm(){
      this.form={
        deptId: null,
        userId: null
      }
    },
    idsTbList(){
      let list=[]
      let userName=this.deptUserOptions.find(item=>item.userId==this.form.userId).userName;
      for (let id of this.ids){
        let item={
          assignId: id,
          type:'CLUE',
          userId:this.form.userId,
          userName:userName,
          deptId:this.form.deptId,
        }
        list.push(item)
      }
      return list;
    }
  }
}
</script>
<style scoped>

</style>
